<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript" src="echarts/theme/customed.js"></script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        // var map = new BMap.Map("container"); // 创建地图实例  
        // var point = new BMap.Point(116.404, 39.865); // 创建点坐标  
        // map.addControl(new BMap.NavigationControl());
        // map.addControl(new BMap.ScaleControl());
        // map.addControl(new BMap.OverviewMapControl());
        // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

        // // 定义一个控件类,即function
        // function ShowLocationControl() {
        //     // 默认停靠位置和偏移量
        //     this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        //     this.defaultOffset = new BMap.Size(10, 10);
        // }

        // // 通过JavaScript的prototype属性继承于BMap.Control
        // ShowLocationControl.prototype = new BMap.Control();

        // // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
        // // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
        // ShowLocationControl.prototype.initialize = function(map) {
        //         // 创建一个DOM元素
        //         var div = document.createElement("div");
        //         // 添加文字说明

        //         map.addEventListener("mousemove", function(e) {
        //             var lon = e.point.lng;
        //             var lat = e.point.lat;
        //             div.innerHTML = lon + ";" + lat;
        //         });

        //         // 设置样式
        //         div.style.width = "195px";
        //         div.style.border = "1px solid gray";
        //         div.style.backgroundColor = "white";

        //         // 添加DOM元素到地图中
        //         map.getContainer().appendChild(div);
        //         // 将DOM元素返回
        //         return div;
        //     }
        //     // 创建控件
        // var mylocationCtrl = new ShowLocationControl();
        // // 添加到地图当中
        // map.addControl(mylocationCtrl);

        // var geolocation = new BMap.Geolocation();
        // geolocation.getCurrentPosition(function(r) {
        //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        //         map.panTo(r.point);
        //         var mk = new BMap.Marker(r.point);
        //         map.addOverlay(mk);
        //         console.log('百度地图位置：' + r.point.lng + ',' + r.point.lat);
        //         // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        //     } else {
        //         // alert('failed' + this.getStatus());
        //     }
        // }, {
        //     enableHighAccuracy: true
        // });
        $.getJSON('json/china.json', function(data) {
            echarts.registerMap('china', data);
            var chart = echarts.init(document.getElementById('container'), "customed");
            chart.setOption({
                series: [{
                    type: 'map',
                    map: 'china'
                }]
            });
        });
    </script>
</body>

</html>